<!--
  功能：功能描述
  作者：zzb
  邮箱：2283325110@qq.com
  时间：2021年12月13日 16:42:57
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <el-card class="box-card">
    <div id="map"></div>
  </el-card>
</template>

<script>
  import * as echarts from 'echarts'
  import china from 'echarts/map/js/china'
  import request from "@/utils/request";
  let option = {
    title: {
      text: '中国疫情图',
    },

    series: [
      {
        name: '现有确诊', //控制鼠标hover上去显示的固定文本
        type: 'map', //告诉echarts需要渲染一个地图
        mapType: 'china', //告诉echarts要渲染注册的china地图
        label: {
          show: true, //控制是否显示省份的名称
          color: '#333', // 设置显示每个省份的字体颜色
        },
        itemStyle: {
          borderColor: '#e8e8e8', //每个省份的边界的颜色
        },
        emphasis: {
          //控制鼠标移入的版块的颜色
          color: '#fff', //移入该模块的字体颜色
          itemStyle: {
            areaColor: '#83b5e7', //鼠标hover到模块上的背景色
          },
        },
        data: [], //每个板块的数据
      },
    ],
    visualMap: [
      {
        type: 'piecewise', //左下角的分段显示
        show: true,
        pieces: [
          {
            min: 10000,
            max: 1000000,
            label: '≥ 10000人',
            color: '#7f1100',
          },
          {
            min: 1000,
            max: 9999,
            label: '1000 - 9999人',
            color: '#bd1316',
          },
          {
            min: 500,
            max: 999,
            label: '500 - 999人',
            color: '#e64b45',
          },
          {
            min: 100,
            max: 499,
            label: '100 - 499人',
            color: '#ff8c71',
          },
          {
            min: 10,
            max: 99,
            label: '10 - 99人',
            color: '#fdd2a0',
          },
          {
            min: 1,
            max: 9,
            label: '1 - 9人',
            color: '#fff2cf',
          },
          {
            min: 0,
            max: 0,
            label: '0',
            color: '#ffffff',
          },
        ],
        color: ['#fafafa', '#7f1100'],
      },
    ],
    tooltip: {
      //控制鼠标hover上去显示信息
      trigger: 'item',
      formatter: function (params) {
        //自定义悬浮窗的显示内容
        return params.name + '<br/>' + params.seriesName + '：' + params.value
      },
    },
  }
  export default {
    // 组件名称
    name: 'ChinaMap',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
      return {}
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    // 以下是生命周期钩子
    /**
     * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
     */
    created() {},
    /**
     * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
     * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
     */
    mounted() {
      this.getData()
      this.myEcharts = echarts.init(document.getElementById('map'))
      this.myEcharts.setOption(option)
    },
    // 组件方法
    methods: {
       getData() {
         request.get("/other/getOtherData", {
           params: {
             url: 'https://c.m.163.com/ug/api/wuhan/app/data/list-total',
           }
         }).then(data => {
           let list = data.data.data.areaTree[2].children.map((item) => ({
             name: item.name,
             value: item.total.confirm - item.total.heal - item.total.dead,
           }))
           option.series[0].data = list
           this.myEcharts.setOption(option)
         })
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
  #map {
    width: 100%;
    height: 400px;
    background-color: #f3f3f3;
  }
  .box-card {
    width: 750px;
    float: left;
    margin-left: 20px;
  }
</style>
